<template>
  <div class="user">
    <div class="user-filter">
      <span>筛选条件</span>
      <el-select
        v-model="activityStatus"
        clearable
        style="width:150px;"
        placeholder="活动状态"
        @change="handleFilter"
      >
        <el-option
          v-for="item in activityStatuses"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="keyword" style="width:200px" placeholder="请输入代理商名称" @keyup.enter.native="handleFilter"/>
      <el-button type="primary" style="margin-left:10px;" plain @click="handleFilter">搜索</el-button>
      <el-button size="medium" type="info" @click="clearParams">清空</el-button>
      <el-button :loading="downloadLoading" type="primary" plain @click="handleExport">导出</el-button>
    </div>
    <el-divider content-position="left">共{{ total }}条数据</el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="distributorId" label="代理商编号" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="accountDetail(scope.row)">{{ scope.row.distributorId }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="distributorName" label="机构/个人名称" min-width="10" align="center"/>
      <el-table-column prop="status" label="活动状态" min-width="10" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status === '1' ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="courseOrderNum" label="课程订单数" min-width="10" align="center">
        <template slot="header" slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="通过代理商课程分销链接下单且交易成功的订单数量" placement="top">
            <span>课程订单数<i class="el-icon-question"/></span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-button type="text">{{ scope.row.courseOrderNum }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="courseAmount" label="课程消费总额" min-width="10" align="center">
        <template slot="header" slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="通过代理商课程分销链接下单且交易成功的订单消费总额。" placement="top">
            <span>课程消费总额<i class="el-icon-question"/></span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-button type="text">￥{{ scope.row.courseAmount }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="awardTotal" label="代理商奖励总额" min-width="10" align="center">
        <template slot="header" slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="通过课程分销链接下单的订单，网校给到代理商的分成总额" placement="top">
            <span>代理商奖励总额<i class="el-icon-question"/></span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!--<account-dialog :data="accountDialog" @closed="accountDialog.dialog = false" />-->
  </div>
</template>

<script>
import AccountDialog from '../userDialog'
import Pagination from '@/components/Pagination'
import { getCourseDistributionList } from '@/api/distribution/agencyachievement'
import { getTenantId } from '@/utils/auth'
import {parseTime} from '@/utils'
export default {
  components: {
    AccountDialog,
    Pagination
  },
  data() {
    return {
      total: 0,
      currentpage: 1,
      pagesize: 10,
      activityStatus: '',
      keyword: '',
      downloadLoading: false,
      accountDialog: {
        dialog: false,
        tableData: null
      },
      activityStatuses: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '启用',
          value: '1'
        },
        {
          label: '禁用',
          value: '0'
        }
      ],
      tableData: [],
      filterData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getCourseDistributionList(getTenantId()).then(res => {
        this.tableData = res.data.items;
        this.filterData = res.data.items;
        this.total = res.data.items.length
      })
    },
    accountDetail(val) {
      this.accountDialog.dialog = true;
      this.accountDialog.tableData = val
    },
    handleFilter() {
      this.tableData = this.filterData.filter(item => {
        if (this.activityStatus && item.status !== this.activityStatus) return false;
        if (this.keyword && item.distributorName.toLocaleLowerCase().indexOf(this.keyword.toLocaleLowerCase()) < 0) return false;
        return true
      });
      this.total = this.tableData.length
    },
    clearParams() {
      this.activityStatus = '';
      this.keyword = '';
      this.getData()
    },
    // 导出按钮
    handleExport() {
      this.downloadLoading = true;
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['代理商编号', '机构/个人名称', '活动状态', '课程订单数', '课程消费总额', '代理商奖励总额'];
        const filterVal = ['distributorId', 'distributorName', 'status', 'courseOrderNum', 'courseAmount', 'awardTotal'];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'agencyManageList',
          autoWidth: true,
          bookType: 'xlsx'
        });
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'createTime') {
          return v[j] ? parseTime(v[j]) : v[j]
        } else {
          return v[j]
        }
      }))
    },
    handleSizeChange(val) {
      this.currentpage = 1;
      this.pagesize = val.value;
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value;
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  &-filter,
  &-keyword {
    font-size: 14px;
    color: #606266;
    margin: 15px 0;
    span {
      margin-right: 10px;
    }
  }
}
</style>
